<!--
    Va-Text 《数据字典的文字》

    使用方式：
        <va-Text v-model="model" :keyData="keyData"/>

    1.keyData:数据字典的唯一标识
    规范：返回的数据要符合(JSON中对应的字段必须：label/value/disabled,不能其他)
      [
        {label:'显示1',value:'值1',disabled:false},
        {label:'显示2',value:'值2',disabled:false},
        {label:'显示3',value:'值3',disabled:false},
        ...
      ]
    2.v-model 数据的双向绑定,绑定父组件中的字段
    3.disabled 是否禁用


-->
<template>
    <va-load :dictKey="dictKey"
             v-model="modelValue2"
    >
        <template #default="{  loading,option }">
            <i v-if="loading" class="el-icon-loading"/>
            <i v-else>{{option.label?option.label:option}}</i>
        </template>
    </va-load>
</template>

<script>
    import {ref,watch, defineComponent} from 'vue'

    export default defineComponent({
        name: "Va-Text",
        props: {
            dictKey: {
                type: String,
                default: null
            },
            //用于接收v-model值 vue3.0 令名
            modelValue: String,
        },
        created() {
        },
        setup(props) {
            //选项值
            const modelValue2 = ref(props.modelValue)

            //watch
            watch(() => props.modelValue, (val) => {
                modelValue2.value=val
            })

            return {
                //data
                modelValue2
                //fun
            }
        }
    })
</script>

<style scoped>

</style>